<script lang="ts" setup>
import { useCounterStore, usePersonStore } from "@/stores/counter";

const counterStore = useCounterStore();

console.log("counterStore", counterStore);

console.log("counterStore.count", counterStore.count);

function changeCount() {
    // counterStore.increment();
    // counterStore.$patch({
    //     count:counterStore.count+1
    // });

    counterStore.$state = { msg: "hi",count:12 };

    console.log("counterStore", counterStore);
    console.log("counterStore.msg", counterStore.msg);
    console.log("counterStore.count", counterStore.count);
}

const personStore = usePersonStore();

console.log("personStore.age", personStore.age);


</script>

<template>
    <h1>pinia的示例:</h1>
    <p>counterStore.count:{{ counterStore.count }}</p>
    <input type="button" value="修改count" @click="changeCount">
    <hr/>
    <p>
        personStore.doubleAge：{{personStore.doubleAge}}
    </p>
</template>

<style scoped>

</style>